/**
 * Created by fanweihua on 2016/12/1.
 */
import React from 'react';
import ListHtml from './listHtml.js';

const ListNav = React.createClass({
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">List</h1>
                    <p className="page__desc">列表</p>
                </div>
                <div className="page__bd">
                    <div className="weui-cells__title">带说明的列表项</div>
                    <div className="weui-cells">
                        <div className="weui-cell">
                            <div className="weui-cell__bd">
                                <p>标题文字</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </div>
                    </div>
                    <div className="weui-cells__title">带图标、说明的列表项</div>
                    <div className="weui-cells">
                        <div className="weui-cell">
                            <div className="weui-cell__hd"><img
                                src=""
                                alt=""></img></div>
                            <div className="weui-cell__bd">
                                <p>标题文字</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </div>
                        <div className="weui-cell">
                            <div className="weui-cell__hd"><img
                                src=""
                                alt=""></img></div>
                            <div className="weui-cell__bd">
                                <p>标题文字</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </div>
                    </div>
                    <div className="weui-cells__title">带跳转的列表项</div>
                    <div className="weui-cells">
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">
                            </div>
                        </a>
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">
                            </div>
                        </a>
                    </div>
                    <div className="weui-cells__title">带说明、跳转的列表项</div>
                    <div className="weui-cells">
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </a>
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </a>
                    </div>
                    <div className="weui-cells__title">带图标、说明、跳转的列表项</div>
                    <div className="weui-cells">
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__hd"><img
                                src=""
                                alt=""></img></div>
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </a>
                        <a className="weui-cell weui-cell_access" href="javascript:;">
                            <div className="weui-cell__hd"><img
                                src=""
                                alt=""></img></div>
                            <div className="weui-cell__bd">
                                <p>cell standard</p>
                            </div>
                            <div className="weui-cell__ft">说明文字</div>
                        </a>
                    </div>
                </div>
            </div>
        );
    }
});

const List = React.createClass({
    getInitialState: function () {
        return {
            html: ListHtml.html
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <ListNav></ListNav>
                    </div>
                </div>
            </div>
        );
    }
});
module.exports = List;